<template>
  <div :id="graphId" ref="graph"></div>
</template>
<script setup>
import G6 from '@antv/g6';
import {onMounted, reactive, ref, toRefs, watchEffect} from "vue";
const props=defineProps({
      graphId: {
        types: String,
        default: "graph"
      },
  width: {
    types: String,
    default: "400"
  }
    })
const $emit=defineEmits(['network'])


const val=ref('')
const graph=ref()
const graphData=reactive({
  nodes: [
    {
      id: "0",
      label: "UDM/HSS",
      x: 300,
      y: 100,
      style: {
        // fill: "#53BF6D",
      },
    },
    {
      id: "1",
      label: "DNS",
      x: 450,
      y: 100,
      comboId: "comboA",
      style: {
        // fill: "#53BF6D",
      },
    },
    {
      id: "2",
      label: "DNssS",
      x: 450,
      y: 150,
      comboId: "comboA",
      style: {
        // fill: "#53BF6D",
      },
    },


  ],
  edges: [
    {
      id: "id-0-1",
      source: "0",
      target: "comboA",
      sourceAnchor: 2,
      targetAnchor: 1,

    },

  ],
  combos: [
    {
      id: "comboA",
      label: "A",
      type: "rect",
      padding: 10,
      size: 30,
      style: {
        fill: "#fff",
        radius: 4,
      },
      // labelCfg: {
      //   refY: 12,
      //   style: {
      //     fill: "#FFF",
      //   },
      // },
      // anchorPoints: [
      //   [0, 0.5],
      //   [0.5, 0],
      //   [1, 0.5],
      //   [0.5, 1],
      // ],
    },
  ],
})
const {graphId,width}=toRefs(props)
onMounted(()=>{

  initGraph();
})
watchEffect(()=>{

})
function initGraph() {
  graph.value = new G6.Graph({
    container: graphId.value,
    width: width.value,
    height: 270,
    fitView: true,
    fitViewPadding: [20, 40, 50, 20],
    //文字
    defaultNode: {
      color: "#707070FF",
      size: [70, 30],
      type: "rect",
      anchorPoints: [
        [0, 0.5],
        [0.5, 0],
        [1, 0.5],
        [0.5, 1],
      ],
      style: {
        radius: 4,
        fill: "#53BF6D",
        cursor: "pointer", //小手
      },
      labelCfg: {
        style: {
          fill: "#FFF",
        },
      },
    },
    //线条(边)
    defaultEdge: {
      style: {
        stroke: "#707070",
      },
      type: "polyline",
    },
    nodeStateStyles: {
      selected: {
        stroke: "#E28C28FF", //描边颜色
        lineWidth: 2,
        shadowColor: "",
        fill: "#ffe191", //填充色
        labelCfg: {
          style: {
            fill: "#000",
          },
        },
      },
    },
  });
  graph.value.data(graphData);

  graph.value.on("node:click", (evt) => {
    let t = graphData.nodes.find(
        (it) => it.id === evt.item._cfg.id
    ).label;
    if (t === "MME" || t === "DNssS") {
      network(t);
      clearState();
      graph.value.setItemState(evt.item, "selected", true); //点击元素添加样式
      graph.value.updateItem(evt.item, {
        // 节点上文本的样式
        labelCfg: {
          style: {
            fill: "#000",
            fontSize: 12,
          },
        },
      });
    }
  });
  graph.value.render();
}
function  clearState() {
  const nodes = graph.value.findAllByState("node", "selected");
  nodes.forEach((item) => {
    graph.value.clearItemStates(item, "selected");
    graph.value.updateItem(item, {
      // 节点上文本的样式
      labelCfg: {
        style: {
          fill: "#fff",
          fontSize: 12,
        },
      },
    });
  });
}
function  network(val) {
  $emit("network", val);
}
</script>



<style scoped lang="scss">

</style>
